<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <!--      分支数据-->
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入分支名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
        <!--          家谱列表-->
        <div class="head-container">
          <el-table
            :data="familyList"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="form"
            default-expand-all
            @row-click="handleFamNodeClick"
          >
            <el-table-column label="包含家谱" align="center" prop="famName"/>
          </el-table>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div>
          <tree-chart
          :data="memberOptions"></tree-chart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import treeChart from "@/views/system/famTree/treeChart";
import {treeselect} from "@/api/system/dept";
import {listFamily, getFamily} from "@/api/system/family";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listFamTree, membertreeselect} from "@/api/system/famTree";
export default {
  name: "index-echarts",
  components: { treeChart },
  data() {
    return {
      // 分支树选项
      deptOptions: undefined,
      //成员树选项
      memberOptions: undefined,
      // 家谱表格数据
      familyList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        memberName: null,
        memberAge: null,
        memberSex: null,
        birthDate: null,
        deadDate: null,
        fatherId: null,
        motherId: null,
        partnerId: null,
        gender: null,
        memberBiography: null,
        disease: null,
        famId: null
      },
    };
  },
  created() {
    this.getTreeselect();
    this.getFamList();
    this.getMemberTreeselect();
  },
  methods: {
    /** 查询家谱列表 */
    getFamList() {
      this.loading = true;
      listFamily(this.queryParams).then(response => {
        this.familyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询成员下拉树结构 */
    // getMemberTreeselect() {
    //   listFamTree().then(response => {
    //     this.memberOptions = response.data;
    //   });
    // },
    /** 查询家谱下拉树结构 */
    getFamTreeselect() {
      famtreeselect().then(response => {
        this.famOptions = response.data;
      });
    },
    /** 转换分支数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 分支节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleFamQuery();
    },
    // 家谱节点单击事件
    handleFamNodeClick(row) {
      console.log(row)
      this.queryParams.famId = row.famId;
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleFamQuery(){
      this.queryParams.pageNum = 1;
      this.getFamList();
    },

  },
};

</script>

<style scoped>

</style>
